<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2023-03-06 11:38:11
 * @LastEditTime: 2023-04-18 10:09:27
 * @LastEditors: pancc 527847805@qq.com
 * @FilePath: \pcj\src\page\product\productClassify.vue
-->
<template>
  <el-container class="dictionary">
    <el-aside class="dictionary-dep">
      <z-button icon="xinzeng" @click="onTypeEdit()" class="mb-10" v-if="purview(2)">新增分类</z-button>
      <template v-for="n in fromQuery.dictionaryTypes" :key="n.id">
        <p class="dis-flex flex-x-between w-100 dtype" :style="n.isChecked ? 'background-color: #f5f7fa' : ''"
          @click="onTypeClick(n.id, n.dictionaryType)">
          <span>{{ n.name }}</span>
          <span v-if="n.id > 0">
            <el-button type="primary" link @click="onTypeEdit(n)" v-if="purview(3)">修改</el-button>
            <el-button type="danger" link @click="onTypeDel(n.id)" v-if="purview(4)">删除</el-button>
          </span>
        </p>
      </template>
    </el-aside>
    <el-main class="dictionary-main flexible">
    <ul class="header-buttons">
        <li>
          <!-- <z-button title="刷新" icon="refresh" color="#40485b" @click="pageQuery"> </z-button> -->
        <z-button icon="add" @click="onValueEdit()" v-if="purview(2)">添加明细</z-button>
      </li>
        <li class="dis-flex">
          <p>
            <!-- <el-input v-model="params.keyword" v-debounce="pageQuery" @clear="pageQuery" placeholder="关键字"
                                    clearable></el-input> -->
          </p>
          <!-- <el-button-group class="ml-10">
                                  <columnSetting v-model="table.columns" name="DictionaryValue/GetPage" />
                                </el-button-group> -->
        </li>
      </ul>
      <el-table :data="fromQuery.dictionaryValues" border stripe ref="tableRef" class="flexible-table">
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column label="英文" v-if="fromQuery.dictionaryType === 2" prop="nameEn" align="center" />
        <el-table-column label="符号" v-if="fromQuery.dictionaryType === 2" prop="nameSym" align="center" />
        <el-table-column v-for="(item, index) in table.columns.filter(r => r.show)" :prop="item.id" :label="item.label"
          :key="item.id + index" align="center">
          <template #default="scope">
            <template v-if="item.id === 'operate'">
              <z-button icon="xiugai" size="small" title="编辑" @click="onValueEdit(scope.row)"
                v-if="purview(3)"></z-button>
              <z-button icon="delete" type="danger" size="small" title="删除" @click="onValueDel(scope.row)"
                v-if="purview(4)"></z-button>
            </template>
            <template v-else-if="item.id === 'isRequired'">
              <el-tag :type="scope.row[item.id] ? 'danger' : 'success'"> {{ scope.row[item.id] ? '是' : '否' }}</el-tag>
            </template>
            <template v-else>
              {{ scope.row[item.id] }}
              {{ scope.row }}
            </template>
          </template>
        </el-table-column>

      </el-table>
    </el-main>

    <dictionaryTypeEdit v-model="dialog.typeShow" v-model:editData="dialog.typeData" @onSave="onTypeback" />
    <dictionaryValueEdit v-model="dialog.valueShow" v-model:editData="dialog.valueData" @onSave="onValueback" />
  </el-container>
</template>
<script setup> 
import { get, post } from '@/api/index';
import dictionaryTypeEdit from './components/dictionaryTypeEdit.vue';
import dictionaryValueEdit from './components/dictionaryValueEdit.vue';
import { reactive } from 'vue';
let { dataProcess, purview } = inject('$global'); 

let fromQuery = reactive({
  dictionaryType: 0,
  dictionaryTypes: [],
  dictionaryValues: [],
  totalCount: 0,
});

let dialog = reactive({
  typeShow: false,
  typeData: {},
  valueShow: false,
  valueData: {}
});


let table = reactive({
  columns: [
    { label: '名称', id: 'name', show: true },
    // { label: '状态', id: 'statusId', show: true },
    { label: '是否默认', id: 'isRequired', show: true },
    { label: '操作', id: 'operate', show: true }
  ],
  data: [],
  totalCount: 0
});

// 获取分类数据
const getDictionaryType = async () => {
  const { result } = await get('DictionaryType/GetList', {});
  fromQuery.dictionaryTypes = [
    { id: -1, dictionaryType: 1, name: '质检项目', isChecked: false },
    { id: -2, dictionaryType: 2, name: '币种', isChecked: false },
    { id: -5, dictionaryType: 5, name: '税率', isChecked: false }
  ];
  result.map(n => {
    fromQuery.dictionaryTypes.push({ id: n.id, dictionaryType: 0, name: n.name, isChecked: false });
  })

};

// 分类编辑
const onTypeEdit = (val = {}) => {
  fromQuery.dictionaryType = val.dictionaryType
  dialog.typeData = val;
  console.log(dialog.typeData);
  dialog.typeShow = true;
  getDictionaryValue(({ id: val.id, dictionaryType: val.dictionaryType }));
}

// 分类点击
const onTypeClick = (id, dictionaryType) => {
  fromQuery.dictionaryType = dictionaryType
  fromQuery.dictionaryTypes.map(n => {
    n.isChecked = (n.id === id && n.dictionaryType === dictionaryType);
  });
  getDictionaryValue({ id: id, dictionaryType: dictionaryType });
}

const onTypeback = () => {
  getDictionaryType()
  dialog.typeShow = false;
}

const onTypeDel = async (val = 0) => {
  if (val > 0) {
    await get('DictionaryType/Delete', { id: val })
    getDictionaryType();
  }
}

const getDictionaryValue = async (val = {}) => {
  const { result } = await post('DictionaryValue/GetPage', { dictionaryTypeId: val.id, dictionaryType: val.dictionaryType, pageindex: 1, pageSize: 999 });
  fromQuery.dictionaryValues = result.items.map(r => {
    return r;
  });
  fromQuery.totalCount = result.totalCount;
}

// 明细编辑
const onValueEdit = (val = {}) => { 
  val['dictionaryTypes'] = fromQuery.dictionaryTypes
  dialog.valueData = val;
  dialog.valueShow = true;
  console.log(dialog);
}

const onValueback = (val) => {
  getDictionaryValue(val)
  fromQuery.dictionaryTypeId = val.dictionaryTypeId;
  dialog.valueShow = false;
}

// 明细编辑
const onValueDel = async (row) => {
  if (row) {
    await post('DictionaryValue/Delete', { ids: [row.id] })
    getDictionaryValue(row);
  }
}

onActivated(async () => {
  getDictionaryType();

});
</script>
  
<style lang="scss" scoped>
.dictionary {
  height: 100%;

  .dtype {
    height: 26px;
    padding: 2px 5px;
  }

  .dtype:hover {
    background-color: #f5f7fa
  }

  &-dep {
    background-color: #fff;
    padding: 10px;
  }

  .header-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }

  &-main {
    background-color: #fff;
    padding: 10px;
    margin-left: 10px;
  }
}
</style>
  